<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<div class="page-header">
	<h1>
		轮播图管理
		<small>
			<a class="blue ml10 show-slider-dialog" href="#modal-slider" data-toggle="modal" data-id="" data-title="" data-sort="" data-image="" data-link="">
				<i class="fa fa-image"></i> 上传轮播图
			</a>
		</small>
	</h1>
</div>

<div class="col-xs-12">
	<table id="dynamic-table" class="table table-striped table-bordered table-hover" style="margin-top:10px">
		<thead>
			<tr>
				<th>轮播图图片</th>
				<th>轮播图标题</th>
				<th>轮播图排序</th>
				<th>轮播图链接</th>
				<th>上传时间</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</div>
<!-- 图片上传弹窗 -->
<div id="modal-slider" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header no-padding">
				<div class="table-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<span class="white">&times;</span>
					</button>
					相册图片管理
				</div>
			</div>
			<div class="modal-body no-padding">
				<div class="row">
					<div class="col-xs-12">
						<form class="form-horizontal mt10" id="slider-form">
							<input type="hidden" name="id" />
							<input type="hidden" name="slider_image" value="" />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图标题：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="slider_title" placeholder="请填写轮播图标题"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">上传轮播图：</label>
								<div class="col-sm-6">
									<a href="javascript:;" id="upload-img">
										<img class="fit-cover" src="" width="160" height="160" />
									</a>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图排序：</label>
								<div class="col-sm-6">
									<input class="form-control" type="number" name="slider_sort" placeholder="选填。请填写轮播图排序，根据序号从高往低排"/>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">轮播图链接：</label>
								<div class="col-sm-6">
									<input class="form-control" type="text" name="slider_link" placeholder="选填。请填写轮播图链接"/>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="modal-footer no-margin-top" >
				<a href="javascript:;" class="btn btn-sm btn-primary" id="save-slider">
					<i class="ace-icon fa fa-check"></i> 保存
				</a>
			</div>
		</div>
	</div>
</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		var sliderForm = $("#slider-form");
		var uploadTarget = $("#upload-img");

		// 显示弹窗
		$("body").on("click", ".show-slider-dialog", function(){
			var imgLink = $(this).data("image");

			uploadTarget.find("img").attr("src", imgLink ? imgLink : '<?=$staticAdminUrl?>assets/images/upload.png');
			sliderForm.find("[name=id]").val($(this).data("id"));
			sliderForm.find("[name=slider_title]").val($(this).data("title"));
			sliderForm.find("[name=slider_sort]").val($(this).data("sort"));
			sliderForm.find("[name=slider_link]").val($(this).data("link"));
			sliderForm.find("[name=slider_image]").val($(this).data("image"));

			setTimeout(function(){
				uploadTarget.uploader({
					"server":  '<?=UP_FORM_URL?>',
					"authorization": "<?=$signature?>",
					"policy": "<?=$policy?>",
					"callback": function(response) {
						var imgFile = "<?=UP_URL?>" + response.url;
						uploadTarget.find("img").attr("src", imgFile);
						sliderForm.find("[name=slider_image]").val(imgFile);
					}
				});
			}, 200)
		})
		// 删除轮播图
		$("body").on("click", ".delete-slider", function(e){
			var id = $(this).data("id");
			layer.confirm('确定删除该轮播图吗？', function(){
				// 提交数据
				var postUrl = "<?=admin_url('cms/delete_slider_action')?>";
				var postData = {"id": id};
				ajax_post(postUrl, postData, function(res){
					table.draw();
				})
			});
		})

		// 保存图片
		$("#save-slider").click(function(){
			sliderForm.submit();
		})
		var submitImgUrl = "<?=admin_url('cms/save_slider_action')?>";
		form_submit(sliderForm, submitImgUrl, function(res) {
			tips_alert(res.msg, res.success, function(){
				if(res.success) {
					$('#modal-slider').modal('hide');
					table.draw();
				}
			});
		})


		// 班级表格
		var table = $('#dynamic-table').dt({
			"ajaxUrl": '<?=admin_url('cms/get_slider_list')?>',
			"columns": [
	            {"data": function(ret){
	                return '<img src="'+ ret.slider_image +'!thumb" width="64"/>';
	            }},
	            {"data": "slider_name"},
	            {"data": "slider_sort"},
	            {"data": "slider_link"},
	            {"data": "createtime"},
	            {"data": function(ret){
	            	var action = '';
	            	action += '<a class="show-slider-dialog green" href="#modal-slider" data-toggle="modal" data-id="'+ ret.id +'" data-title="'+ ret.slider_name +'" data-sort="'+ ret.slider_sort +'" data-image="'+ ret.slider_image +'" data-link="'+ ret.slider_link +'"><i class="fa fa-edit"></i> 修改</a>';
	            	action += '<a class="delete-slider red ml20" data-id="'+ ret.id +'"><i class="fa fa-times"></i> 删除</a>';
	                return action;
	            }},
			]
		});
	})
</script>